<template>
  <div class="option-collapse">
    <el-collapse
      v-model="activeLabel"
      accordion
    >
      <slot>
        <!-- 内容 -->
      </slot>
    </el-collapse>
  </div>
</template>
<script>
export default {
  components: {},
  props: {
    active: String,
  },
  data() {
    return {
      activeLabel: null,
    };
  },
  computed: {},
  watch: {},
  created() {
    this.initActiveLabel();
  },
  methods: {
    initActiveLabel() {
      if (this.active) {
        this.activeLabel = this.active;
      }
    },
  },
};
</script>
<style lang="less" scoped>
.option-collapse {
  padding-left: 0;
  :deep(.el-collapse) {
    .el-collapse-item {
      .el-collapse-item__header {
        border-bottom: 1px solid #eaeaea;
        padding-left: 16px;
        background-color: #f1f1f1;
      }
      .el-collapse-item__content {
        padding: 10px 0;
        background-color: #ebeef5;
        border-bottom: 1px solid #dcdfe6;
      }
    }
  }
}
</style>
<style lang="less">
.visualComponents_theme_dark {
  .option-collapse {
    .el-collapse-item {
      .el-collapse-item__content {
        background-color: #122b40 !important;
        border-bottom: 1px solid #071f30 !important;
      }
    }
  }
}
</style>
